<!--
 * @Author: your name
 * @Date: 2021-08-10 15:01:14
 * @LastEditTime: 2021-08-10 16:49:32
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \briup\3-html&css\day07\09-表格.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
    <style>
        /* table{
            border:10px solid red; */
            /* border-collapse: separate;默认值有间隙 */
            /*内容与单元格 单元格与单元格之间间隙合并 */
             /* border-collapse: collapse; 
        }
        table tr>td{
            border:10px solid red;
        } */
        table tr{
            /* 不用设置行的背景底部，显示不出来 */
            /* background-bottom:10px solid red; */
            /* table tr td 背景颜色可以显示 */
            background-color: salmon;
        }
        table tr:first-child{
            background-color: silver;
        }
        /* 2n表示偶数，even=2n 2n+1表示奇数 odd=2n+1 */
        table tr:nth-child(2n){
            background-color: skyblue;
        }
        table tr>td{
            border-bottom:1px solid #333;
        }
        table tr:hover{
            background-color: steelblue;
            cursor:pointer;
        }
        table {
            /* 标题位置 */
            caption-side: top;
            /* table-layout: fixed 的表格，各列宽度由第一行决定，后面指定的宽度会被忽略。你第一行合并了，所以各列宽度均分了。 */
            table-layout: fixed;
            text-align:center;
            /* 表格布局居中 */
            margin:0 auto;
            border-collapse: collapse;
            width:220px;
            height:220px;
        }
    </style>
</head>
<body>
    <table>
        <caption>表1-1用户信息表 做数据展示</caption>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>职位</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>20</td>
            <td>职位</td>
        </tr>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>职位</td>
        </tr>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>职位</td>
        </tr>
        

    </table>
</body>
</html>